<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>有间餐厅</title>
    <meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发"/>
    <meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!"/>
    <meta name="author" content="DeathGhost"/>
    <link th:href="@{/style/style.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/public.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/js/jqpublic.js}"></script>
    <script>

    </script>
</head>

<body>
<!--引用头部导航栏代码块-->
<div th:replace="~{commons/common::top}"></div>

<!--Start content-->
<section class="Cfn">
    <aside class="C-left">
        <div class="S-time">服务时间：周一~周六
            <time>10:00</time>
            -
            <time>23:00</time>
        </div>
        <div class="C-time">
            <img class="f293x274"src="upload/yjct.png"/>
        </div>
        <a href=""><img src="images/welcom.png"></a>
        <a href=""><img src="images/by_button.png"></a>
    </aside>
    <div class="F-middle">
        <ul class="rslides f426x240">
            <li><a th:href="@{'/shop?meal_id='+${mealList[0].meal_id}}"><img width="600" height="403" th:src="${mealList[0].meal_image}"/></a></li>
            <li><a th:href="@{'/shop?meal_id='+${mealList[1].meal_id}}"><img width="600" height="403" th:src="${mealList[1].meal_image}"/></a></li>
            <li><a th:href="@{'/shop?meal_id='+${mealList[2].meal_id}}"><img width="600" height="403" th:src="${mealList[2].meal_image}"/></a></li>
        </ul>
    </div>
    <aside class="N-right">
        <div class="N-title">人气超高 <i>popularity</i></div>
        <ul class="Newslist">
            <li><i></i>欢迎访问有间餐厅...</li>
            <li><i></i>在这里你能看到最实惠、最美味的食物...</li>
        </ul>
        <ul class="Orderlist" id="UpRoll">
            <li>
                <p>菜单：[[${mealList[0].meal_name}]]元</p>
                <p>原价：[[${mealList[0].meal_price}]]元</p>
                <p>现价：<i class="State03">[[${mealList[0].meal_price_now}]]元</i></p>
            </li>
            <li>
                <p>菜单：[[${mealList[1].meal_name}]]元</p>
                <p>原价：[[${mealList[1].meal_price}]]元</p>
                <p>现价：<i class="State03">[[${mealList[1].meal_price_now}]]元</i></p>
            </li>
            <li>
                <p>菜单：[[${mealList[2].meal_name}]]元</p>
                <p>原价：[[${mealList[2].meal_price}]]元</p>
                <p>现价：<i class="State03">[[${mealList[2].meal_price_now}]]元</i></p>
            </li>
        </ul>
        <script>
            var UpRoll = document.getElementById('UpRoll');
            var lis = UpRoll.getElementsByTagName('li');
            var ml = 0;
            var timer1 = setInterval(function () {
                var liHeight = lis[0].offsetHeight;
                var timer2 = setInterval(function () {
                    UpRoll.scrollTop = (++ml);
                    if (ml == 1) {
                        clearInterval(timer2);
                        UpRoll.scrollTop = 0;
                        ml = 0;
                        lis[0].parentNode.appendChild(lis[0]);
                    }
                }, 10);
            }, 5000);
        </script>
    </aside>
</section>
<section class="Sfainfor">
    <article class="Sflist">
        <div id="Indexouter">
            <ul id="Indextab">
                <li class="current">今日特价</li>
            </ul>
            <div id="Indexcontent">
                <ul style="display:block;">
                    <li>
                        <div class="SCcontent">
                            <a th:href="@{'/shop?meal_id='+${meal.meal_id}}" title="菜品名称" th:each="meal:${mealList1}">
                                <figure>
                                    <img th:src="${meal.meal_image}">
                                    <figcaption>
                                        <span class="title">[[${meal.meal_name}]]</span>
                                        <del>￥[[${meal.meal_price}]]</del>
                                        <i style="color:mediumvioletred;">￥[[${meal.meal_price_now}]]</i>
                                    </figcaption>
                                </figure>
                            </a>
                        </div>
                        <div class="bestshop">
                            <a title="店铺名称">
                                <figure>
                                    <img src="upload/xiaoyingjia.jpg">
                                </figure>
                            </a>
                            <a title="店铺名称">
                                <figure>
                                    <img src="upload/xiaoyingjia.jpg">
                                </figure>
                            </a>
                            <a title="店铺名称">
                                <figure>
                                    <img src="upload/xiaoyingjia.jpg">
                                </figure>
                            </a>
                            <a target="_blank" title="店铺名称">
                                <figure>
                                    <img src="upload/xiaoyingjia.jpg">
                                </figure>
                            </a>
                            <a title="店铺名称">
                                <figure>
                                    <img src="upload/xiaoyingjia.jpg">
                                </figure>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </article>
    <aside class="A-infor">
        <img src="upload/2014911.jpg">
        <div class="usercomment">
            <span>用户菜品点评</span>
            <ul>
                <li th:each="cart:${cartList}">
                    <img th:src="${cart.meal.meal_image}">
                    用户“[[${cart.user.username}]]”对“[[${cart.meal.meal_name}]]”评说：[[${cart.title}]]
                </li>
            </ul>
        </div>
    </aside>
</section>
<!--End content-->
<!--引用底部栏代码块-->
<div th:replace="~{commons/common::last}"></div>

</body>
</html>
